<template>
  <div class="book-detail-header">
    <div class="cover-box">
      <el-image
        v-if="book.cover_url"
        :src="book.cover_url"
        fit="cover"
        class="cover"
        hide-on-click-modal
        preview-teleported
        :preview-src-list="[book.cover_url]"
      >
        <template #error>
          <div class="cover placeholder">无封面</div>
        </template>
      </el-image>
      <div v-else class="cover placeholder">无封面</div>
    </div>
    <div class="meta">
      <h1 class="title">{{ book.title }}<span v-if="book.subtitle" class="sub">{{ book.subtitle }}</span></h1>
      <div class="meta-line">
        <span>{{ book.author }}</span>
        <span class="dot" />
        <span>{{ book.dynasty }}</span>
        <span class="dot" />
        <span>{{ book.category }}</span>
        <span v-if="book.total_chapters" class="dot" />
        <span v-if="book.total_chapters">共 {{ book.total_chapters }} 章</span>
      </div>
      <p v-if="book.description" class="desc">{{ book.description }}</p>
      <div class="actions">
        <el-button class="btn-read" size="small" @click="$emit('read-first')">开始阅读</el-button>
        <el-button class="btn-outline" size="small" text @click="$emit('toggle-outline')">
          {{ toggleText }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({ 
  book: { type: Object, required: true },
  navigatorCollapsed: { type: Boolean, default: false },
  mobile: { type: Boolean, default: false }
})

// 动态按钮文本：桌面显示/隐藏目录；移动端打开/关闭目录
const toggleText = computed(() => {
  if (props.mobile) return props.navigatorCollapsed ? '打开目录' : '关闭目录'
  return props.navigatorCollapsed ? '显示目录' : '隐藏目录'
})
</script>

<style scoped>
.book-detail-header { display:flex; gap:28px; padding: 32px 0 24px; }
.cover-box { width:200px; flex-shrink:0; position:relative; }
.cover { width:100%; height:280px; border-radius:10px; box-shadow:0 6px 18px -6px rgba(0,0,0,.25); }
.cover.placeholder { background:#d8dfe6; color:#555; display:flex; align-items:center; justify-content:center; height:280px; border-radius:10px; font-size:14px; }
.meta { flex:1; display:flex; flex-direction:column; }
.title { margin:0 0 12px; font-size:34px; line-height:1.18; font-weight:600; letter-spacing:1px; background:linear-gradient(90deg,#2c3e50,#405870); -webkit-background-clip:text; background-clip:text; color:transparent; }
.title .sub { margin-left:12px; font-size:16px; font-weight:400; color:#5d6d7a; letter-spacing:0; background:none; -webkit-background-clip:initial; background-clip:initial; color:#5d6d7a; }
.meta-line { display:flex; flex-wrap:wrap; gap:6px; align-items:center; color:#5b6b77; font-size:13px; }
.meta-line .dot { width:4px; height:4px; background:#a5b2bc; border-radius:50%; display:inline-block; }
.desc { margin:14px 0 18px; line-height:1.6; color:#4a5862; font-size:14px; max-width:880px; }
.actions { display:flex; gap:12px; }
/* 按钮主题化 */
.actions :deep(.btn-read) { background:linear-gradient(120deg,#cfa355,#e2c98a); border:none; font-weight:600; letter-spacing:.5px; padding:10px 20px; border-radius:20px; color:#fff; box-shadow:0 4px 14px -4px rgba(170,120,40,0.55); }
.actions :deep(.btn-read:hover){ filter:brightness(1.07); }
.actions :deep(.btn-read:active){ filter:brightness(.93); }
.actions :deep(.btn-outline) { background:rgba(255,255,255,0.65); backdrop-filter:blur(6px); border:1px solid rgba(190,150,90,0.45); font-weight:500; letter-spacing:.5px; padding:10px 20px; border-radius:20px; color:#7a5a22; }
.actions :deep(.btn-outline:hover){ background:rgba(255,255,255,0.85); }
.actions :deep(.btn-outline:active){ background:rgba(255,255,255,0.55); }
@media (prefers-color-scheme: dark){
  .actions :deep(.btn-read){ background:linear-gradient(120deg,#b7853e,#d7b06d); box-shadow:0 4px 14px -4px rgba(0,0,0,0.55); }
  .actions :deep(.btn-outline){ background:rgba(70,60,50,0.6); border-color:rgba(220,180,110,0.45); color:#e2c892; }
  .actions :deep(.btn-outline:hover){ background:rgba(70,60,50,0.85); }
}
@media (max-width: 780px) {
  .book-detail-header { flex-direction:column; }
  .cover-box { width:160px; }
  .cover { height:220px; }
  .title { font-size:28px; }
}
</style>
